import { Flex } from 'antd';
import { useState } from 'react';

import { RegularText } from '../../../../../components/typography/RegularText.tsx';
import { useBarterStyles } from '../styles.tsx';

import type { MetadataList } from '../../../../../types.ts';
import type { FC } from 'react';

interface IBarterCardProps {
    listOfNFTs: MetadataList;
    text: string;
}

export const BarterCard: FC<IBarterCardProps> = ({ listOfNFTs, text }) => {
    const { styles, cx } = useBarterStyles();
    const [, setRerender] = useState(false);
    return (
        <div className={styles.inventory}>
            <Flex align="center" justify="center" vertical>
                <div style={{ marginBottom: '16px' }}>
                    <RegularText>
                        {text}
                    </RegularText>
                </div>
                <Flex gap={8} wrap="wrap">
                    {
                        listOfNFTs && listOfNFTs.map(NFT => {
                            return (
                                <div key={NFT.tokenId + NFT.contract} className={cx(styles.card, { ['checked']: NFT.checked })} onClick={() => {
                                    NFT.checked = !NFT.checked;
                                    setRerender(prev => !prev);
                                }}>
                                    <img src={NFT.img} alt={NFT.contract}/>
                                </div>
                            );
                        })
                    }
                </Flex>

            </Flex>
        </div>
    );
};
